<template>
  <h1>vue3 - ref</h1>
    <p>
        用户名：{{ username }}
    </p>
    <p>
        年龄：{{ age }}
        <!-- tremplate中，直接写变量名即可 -->
        <button @click="age+=2">年龄+2</button>
        <button @click="changeAge">年龄+5</button>
    </p>
    <h2>用户列表</h2>
    <ul>
        <li v-for="el in arr">用户名：{{el.name}}，密码：{{ el.pass }}</li>
    </ul>
    <p>
        <button @click="addUser">新增用户</button>
        <button @click="nextPage">下一页</button>
        <button @click="submitData">提交所有用户信息</button>
    </p>
</template>
<script setup>
import { ref, unref } from 'vue';

const username = ref("admin");
const age = ref(3);
//定义函数处理事件
const changeAge = ()=>{
    //必须有.value
    age.value += 5;
}

// 数组
const arr = ref([
    {name:"admin",pass:"123456"},
    {name:"test1",pass:"aaaa"},
    {name:"test2",pass:"bbb"}
])
//下一页
const nextPage = ()=>{
    arr.value = [
    {name:"zhangsan",pass:"555"},
    {name:"lisi",pass:"666"},
    {name:"wangwu",pass:"77"}
    ]
}
//新增用户 
const addUser = ()=>{
    arr.value.push({
        name:"qinshihuang",pass:"888"
    })
}
const submitData = ()=>{
    console.log(arr);
    console.log(unref(arr));
}

</script>